<!-- 门店入驻 -->
<template>
	<view class="apply-commission-wrap page_box">
		<!-- 表单 -->
		<view class="apply-form content_box">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="姓名" prop="technician_username">
					<u-input placeholder="请输入姓名" :placeholderStyle="placeholderStyle" v-model="model.technician_username" type="text"></u-input>
				</u-form-item>
				
				<u-form-item :labelStyle="labelStyle" prop="technician_avatar" label="头像" label-position="top" label-width="150" :borderBottom="true">
					<u-upload :placeholderStyle="placeholderStyle" :showProgress="false" @on-uploaded="uploadSuccess($event, 'technician_avatar')" @on-remove="uploadRemove($event, 'technician_avatar')" :action="`${$BASE_URL}/api/common/upload`" :header="{token: token}" :file-list="technician_avatar" width="148" height="148" maxCount="1"></u-upload>
				</u-form-item>
				
				<u-form-item :border-bottom="false" :labelStyle="labelStyle" label-width="150" label-position="left" label="自我介绍" prop="self_introduction">
					<u-input type="textarea" border placeholder="自我介绍~" :placeholderStyle="placeholderStyle" v-model="model.self_introduction"></u-input>
				</u-form-item>
				
				<u-form-item :border-bottom="false" :labelStyle="labelStyle" label-width="150" label-position="left" label="特长" prop="specialties">
					<u-input type="textarea" border placeholder="特长~" :placeholderStyle="placeholderStyle" v-model="model.specialties"></u-input>
				</u-form-item>
				
				<u-form-item :border-bottom="false" :labelStyle="labelStyle" label-width="150" label-position="left" label="工作经历" prop="work_experience">
					<u-input type="textarea" border placeholder="工作经历~" :placeholderStyle="placeholderStyle" v-model="model.work_experience"></u-input>
				</u-form-item>
				
				<u-form-item :labelStyle="labelStyle" prop="certificate" label="资质证书" label-position="top" label-width="150" :borderBottom="true">
					<u-upload :placeholderStyle="placeholderStyle" :showProgress="false" @on-uploaded="uploadSuccess($event, 'certificate')" @on-remove="uploadRemove($event, 'certificate')" :action="`${$BASE_URL}/api/common/upload`" :header="{token: token}" :file-list="certificate" width="148" height="148" maxCount="3"></u-upload>
				</u-form-item>
				
				<u-form-item :labelStyle="labelStyle" prop="life_photos" label="生活照" label-position="top" label-width="150" :borderBottom="true">
					<u-upload :placeholderStyle="placeholderStyle" :showProgress="false" @on-uploaded="uploadSuccess($event, 'life_photos')" @on-remove="uploadRemove($event, 'life_photos')" :action="`${$BASE_URL}/api/common/upload`" :header="{token: token}" :file-list="life_photos" width="148" height="148" maxCount="3"></u-upload>
				</u-form-item>
				
				<view class="u-flex u-row-center u-col-center"><button class="u-reset-button save-btn" @tap="onSubmit" :disabled="isFormEnd">确认提交</button></view>
			</u-form>
		</view>

		
	</view>
</template>

<script>
	import timeSelector from '@/components/xiujun-time-selector/index.vue';
	import Auth from '@/shopro/permission/index.js';
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	import { MAP_KEY } from '@/env.js';
	export default {
		components: {timeSelector},
		data() {
			return {
				is_time:false,
				technician_avatar:[],
				showNotice: false,
				showWeeksModal: false, //星期弹窗
				isFormEnd: false,
				authNotice: {},
				// 表单
				errorType: ['message'],
				selectShow: false,
				selectMode: 'mutil-column', // single-column, mutil-column, mutil-column-auto
				selectType: '',
				selectList: [],
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '500',
					color: '#333'
				},
				placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
				certificate:[],
				life_photos:[],
				model: {
					technician_username: '', //名称
					refusal_order_time:'',//休息时间
					technician_avatar: [], //技师头像
					self_introduction: '', //自我介绍
					work_experience: '', //工作经历
					certificate: [], //资质证书
					life_photos: []//生活照
				},
				rules: {
				},
				token: uni.getStorageSync('token')
			};
		},
		computed: {
			
		},
		onLoad() {
			this.model.refusal_order_time = JSON.stringify([{'周一':[]},{'周二':[]},{'周三':[]},{'周四':[]},{'周五':[]},{'周六':[]},{'周日':[]}])
			console.log(this.model.refusal_order_time)
			this.getinit()
		},
		onReady() {
			
		},
		methods: {
			clonse(){
				this.$u.toast('设置后请点击底部的确认');
				this.is_time = false
			},
			selectTimeEvent(e){
				this.model.refusal_order_time = e
			},		
			// 上传图片成功
			uploadSuccess(e, type) {
				switch (type) {
					case 'technician_avatar':
						this.model.technician_avatar = []
						e.forEach(item => {
							if(typeof(item.response)!='undefined'){
								this.model.technician_avatar.push(item.response.data.fullurl);
							}else{
								this.model.technician_avatar.push(item.url);
							}
						})
						break;
					case 'certificate':
						this.model.certificate = []
						e.forEach(item => {
							if(typeof(item.response)!='undefined'){
								this.model.certificate.push(item.response.data.fullurl);
							}else{
								this.model.certificate.push(item.url);
							}
						});
						break;
					case 'life_photos':
						this.model.life_photos = []
						e.forEach(item => {
							if(typeof(item.response)!='undefined'){
								this.model.life_photos.push(item.response.data.fullurl);
							}else{
								this.model.life_photos.push(item.url);
							}
						});
						break;		
					default:
						return;
				}
				
			},

			// 移除图片
			uploadRemove(index, type) {
				switch (type) {
					case 'technician_avatar':
						this.model.technician_avatar.splice(index, 1);
						break;
					case 'certificate':
						this.model.certificate.splice(index, 1);
						break;
					case 'life_photos':
						this.model.life_photos.splice(index, 1);
						break;		
					default:
						return;
				}
				console.log(this.model)
			},
			getinit(){
				let that = this;
				let userInfo = uni.getStorageSync('userInfo')
				
				that.$http('technician.getTechnicianCheckInfo', {}, '获取中...').then(res => {
					that.model = res.data
					
					if(that.model.technician_avatar){
						that.technician_avatar = [{'url':that.model.technician_avatar}]
						that.model.technician_avatar = [that.model.technician_avatar]
					}
					
					if (this.model.certificate) {
						this.model.certificate.forEach(item => {
							this.certificate.push({
								url: item
							});
						});
					}
					
					if (this.model.life_photos) {
						this.model.life_photos.forEach(item => {
							this.life_photos.push({
								url: item
							});
						});
					}
					
				})	
			},
			// 申请门店
			applyStore() {
				let that = this;
				this.isFormEnd = false;
				that.$http('technician.submitTechnicianInfo', that.model, '提交中...').then(res => {
					this.isFormEnd = true;
					if (res.code === 1) {
						//  #ifdef MP-WEIXIN
						this.$store.commit('subscribeMessage', 'storeApply');
						//  #endif
						uni.showToast({
							title: res.msg,
							success: () => {
								setTimeout(function(){
									that.$Router.back();
								},1500)
							}
						});
					}
				});
			},

			// 提交
			onSubmit() {
				let that = this;
				console.log(that.model)
				if (!that.model.technician_avatar.length) {
					this.$u.toast('请上传技师头像');
					return;
				}
				if (!that.model.technician_username) {
					this.$u.toast('请填写姓名');
					return;
				}
				that.model.technician_avatar = that.model.technician_avatar.join(',')
				that.model.certificate = that.model.certificate.join(',')
				that.model.life_photos = that.model.life_photos.join(',')
				that.model.refusal_order_time = JSON.stringify(that.model.refusal_order_time)
				
				this.applyStore();
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			}
		}
	};
</script>

<style lang="scss">
	.apply-commission-wrap {
		background-color: #fff;

		.head-box {
			background: url($IMG_URL+'/imgs/user/sh_leader_apply_head.png') no-repeat;
			background-size: 100% auto;
			height: 370rpx;
		}
	}

	// 表单
	.apply-form {
		width: 750rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;

		.agreement {
			margin-top: 20rpx;

			.agreement-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #4cb89d;
			}
		}

		.save-btn {
			width: 690rpx;
			line-height: 86rpx;
			background: linear-gradient(90deg, #2dae9c, #6bc29e);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(61, 179, 156, 0.34);
			border-radius: 43rpx;
			font-weight: 500;
			color: #ffffff;
			margin: 30rpx 0;
		}
	}

	// 星期
	.week-modal {
		.week-modal--head {
			height: 100rpx;
			border-bottom: 1rpx solid $u-border-color;

			.text-cancel {
				color: #ccc;
			}

			.text-green {
				color: #18b566;
			}
		}

		.week-modal--content {
			.week-btn {
				margin-right: 56rpx;
				margin-bottom: 30rpx;

				&:nth-of-type(4n) {
					margin-right: 0;
				}
			}
		}
	}

	// 提示
	.notice-modal {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 612rpx;
		min-height: 658rpx;
		background: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;
	
	.img-wrap {
			margin-bottom: 50rpx;

			.notice-img {
				width: 180rpx;
				height: 170rpx;
			}
		}

		.notice-title {
			font-size: 35rpx;
			font-weight: bold;
			color: #46351b;
			margin-bottom: 28rpx;
		}

		.notice-detail {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
			margin-bottom: 50rpx;
		}

		.notice-btn {
			width: 492rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, #2dae9c, #6bc29e);
			box-shadow: 0 7rpx 11rpx 2rpx rgba(61, 179, 156, 0.34);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			margin-bottom: 10rpx;
		}

		.back-btn {
			width: 492rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #3ab29c;
			background: none;
		}
	}
	
</style>
